<template>
  <view :class="{'careerVipSideLayoutWrapper':true,'isShow':isShow,'directHide':directHide,'isHide':slideClose}"
    v-if="(subStatus==10||subStatus==30)">
    <view :class="{'sideTextdialog':true,'alreadyVipTips':(subVipStatus==10)}" @click="applyVipShow=true"
      @touchstart="touchStart" @touchend="touchEnd" z-index="9999"></view>
    <u-popup v-model="applyVipShow" mode="center" :mask-custom-style="{'z-index':9999}"
      @click.stop.prevent="handlePrevent">
      <view class="sharepopupWrapper">
        <view :class="{'sharepopupMain':true,'alreadyVipMain':expireStartTime&&expireEndTime}">
          <view class="rewardContent">
            <view class="rewardItem" v-for="item,index in rewardList" :key="index">
              <view class="rewardFlag"></view>
              {{item.title}}
            </view>
          </view>

        </view>
        <view class="expireTimes" v-if="expireStartTime&&expireEndTime">
          {{expireStartTime}} - {{expireEndTime}}
        </view>
        <view class="expireTimes" v-else>
          该服务的期限为一年
        </view>
        <view class="sharepopupCloseBtn" @click="handleClose"></view>
        <view class="sharepopupBtn" @click="hanadleApplyVip" v-if="subVipStatus==20">
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getMySubscribeStatus, receiveSubscribe } from "@/api/modules/vip.js";
export default {
  name: "careerVipSideLayout",
  data() {
    return {
      slideClose: false,
      directHide: true,
      isShow: false,
      applyVipShow: false,
      rewardList: [
        { title: "每月一份行业/职业薪酬报告" },
        { title: "每月分享行业/职业案例(或职讯) 5篇" },
      ],
      startX: 0,
      startY: 0,
      personId: "",
      subStatus: "0", //用户订阅状态   0：未订阅  10:订阅中  20：未分享不能领取 30：已分享待订阅 40：已过期  50:已关闭订阅
      subVipStatus: "", //订阅vip状态   10:开启  20:关闭
      subId: "",
      expireStartTime: "",
      expireEndTime: "",
      careerVipSideLayoutTime: "",
      timer: "",
    };
  },
  created() {
    this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
    // this.reqGetMySubscribeStatus();
    this.$bus.$on("setVippopUpVisible", this.setVippopUpVisible);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.$bus.$off("setVippopUpVisible", this.setVippopUpVisible);
  },
  methods: {
    handleTimeCounter() {
      this.careerVipSideLayoutTime = uni.getStorageSync(
        "careerVipSideLayoutTime"
      );
      if (this.careerVipSideLayoutTime) {
        this.startCount();
      } else {
        uni.setStorageSync("careerVipSideLayoutTime", 5);
        this.startCount();
      }
    },
    handlePrevent() {},
    setVippopUpVisible(val) {
      // console.log("setsetset");

      this.applyVipShow = val;
    },
    startCount() {
      this.timer = setInterval(() => {
        let nowTime = uni.getStorageSync("careerVipSideLayoutTime");
        if (nowTime >= 0) {
          this.isShow = true;
          this.directHide = false;
          uni.setStorageSync("careerVipSideLayoutTime", nowTime - 1);
        } else if (nowTime == -1) {
          this.directHide = true;
          clearInterval(this.timer);
        } else {
          this.isShow = false;
          clearInterval(this.timer);
        }
      }, 1000);
    },
    handleClose() {
      this.$bus.$emit("setVippopUpVisible", false);
      this.applyVipShow = false;
    },
    reqGetMySubscribeStatus() {
      const params = {
        personId: this.personId,
      };
      getMySubscribeStatus(params).then((res) => {
        if (res.code == 200) {
          getApp().globalData.subStatus = res.data.subStatus;
          getApp().globalData.subVipStatus = res.data.subVipStatus;
          getApp().globalData.subId = res.data.subId;
          this.subStatus = res.data.subStatus;
          this.subVipStatus = res.data.subVipStatus;
          this.subId = res.data.subId;
          this.expireStartTime = res.data.expireStartTime;
          this.expireEndTime = res.data.expireEndTime;
          if (res.data.subStatus == 30) {
            //第一个页面需要给5秒,在app.vue里
            this.startCount();
          }
          // if (res.data.subStatus == 10) {
          //   //领取过之后直接继承上次剩下的秒数倒数
          //   this.startCount();
          // }
        }
      });
    },
    hanadleApplyVip() {
      const params = {
        personId: this.personId,
        subId: this.subId,
        appletOpenId: uni.getStorageSync("openid"),
      };
      receiveSubscribe(params).then((res) => {
        if (res.code == 200) {
          try {
            uni.requestSubscribeMessage({
              tmplIds: ["meN3arXkcBxBpGRG81narVRMmqU-jA5i-IXRcs0fPb4"],
              complete: (res) => {
                console.log(res);
              },
            });
          } catch (error) {
            console.log("订阅错误！", error);
          }

          // this.reqGetMySubscribeStatus();
          // this.applyVipShow = false;
          // this.isShow = false;
          uni.showToast({
            icon: "none",
            title: "恭喜您，成功成为职业vip会员！",
            duration: 2000
          });
        }
      });
    },
    touchStart(e) {
      if (e.touches.length == 1) {
        //设置触摸起始点水平方向位置
        this.startX = e.touches[0].clientX;
      }
    },
    touchEnd(e) {
      if (e.changedTouches.length == 1) {
        //手指移动结束后水平位置
        var endX = e.changedTouches[0].clientX;
        let diff = endX - this.startX;
        if (Math.abs(diff) > 20) {
          if (diff > 0) {
            console.log("左滑...");
            this.handleEntranceSlide();
          } else {
            console.log("右滑...");
          }
        }
      }
    },
    handleEntranceSlide() {
      this.isShow = false;
      this.slideClose = true;
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes toShow {
  from {
    right: -400rpx;
  }
  to {
    right: 32;
  }
}
@keyframes toHide {
  from {
    right: 0;
  }
  to {
    right: -800rpx;
  }
}
.careerVipSideLayoutWrapper {
  position: fixed;
  right: 0;
  bottom: 210rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  &.isShow {
    animation: toShow 0.3s;
    animation-timing-function: cubic-bezier(0.8, 0.6, 0.58, 1);
    right: 32rpx;
  }
  &.isHide {
    animation: toHide 0.3s;
    animation-timing-function: cubic-bezier(0.8, 0.6, 0.58, 1);
    right: -800rpx;
  }
  &.directHide {
    right: -800rpx;
  }
  .sideTextdialog {
    position: relative;
    width: 604rpx;
    height: 72rpx;
    background-image: url($img-base + "career/unlockedVip.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 34rpx;
  }
  .alreadyVipTips {
    background-image: url($img-base + "career/alreadyVipTip.png?v=2");
    width: 242px;
  }
}
.sharepopupWrapper {
  .sharepopupMain {
    width: 568rpx;
    height: 512rpx;
    background-image: url($img-base + "career/unlockedVipDialog.png?v=2");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    &.alreadyVipMain {
      background-image: url($img-base + "career/alreadyVipMain.png?v=2");
    }
    .rewardContent {
      display: flex;
      flex-direction: column;
      position: relative;
      top: 206rpx;
      left: 34rpx;
      width: 500rpx;
      padding: 8rpx 20rpx 20rpx 30rpx;
      background-color: white;
      .rewardItem {
        display: flex;
        line-height: 48rpx;
        .rewardFlag {
          display: inline-block;
          width: 8rpx;
          height: 10rpx;
          margin-top: 16rpx;
          background: #ee6738;
          margin-right: 16rpx;
        }
      }
    }
  }
  .expireTimes {
    position: relative;
    bottom: 66rpx;
    color: #c48661;
    // text-align: center;
    padding-left: 40rpx;
  }
  .sharepopupCloseBtn {
    position: absolute;
    top: 104rpx;
    right: 24rpx;
    width: 28rpx;
    height: 28rpx;
    background-image: url($img-base + "career/sharepopupCloseBtn.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .sharepopupBtn {
    width: 568rpx;
    height: 88rpx;
    background-image: url($img-base + "career/applyVipBtn.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: 32rpx;
  }
}
</style>
<style lang="scss">
.careerVipSideLayoutWrapper {
  ::v-deep .u-mode-center-box {
    background-color: transparent !important;
  }
}
</style>